import React, { Component } from 'react';
import { View, Text, TouchableWithoutFeedback } from 'react-native';
import { directToPage } from '../../utils/extension';
import AniImage from '../AniImage';

class CourseItem extends Component{
  render() {
    const { navigation, styles, data, index } = this.props;
    return (
      <TouchableWithoutFeedback
      onPress={()=>directToPage(navigation, 'Detail', {courseId: data.id})}
      >
        {/* 按需新增类名 */}
        <View
          style={[styles.courseItem, index === 0 && styles.courseItemFirst]}
        >
          {/* 左侧 */}
          <View style={styles.imgView}>
            <AniImage
              styles={styles.imgView}
              uri={data.img}
            />
          </View>
          {/* 右侧 */}
          <View style={styles.infoView}>
            {/* numberOfLines显示2排后面省略 */}
            <Text
              numberOfLines={2}
              style={styles.courseName}
            >{data.course_name}</Text>
            <Text style={styles.price}>{data.price == 0 ? '免费' : `￥${data.price}.00`}</Text>
          </View>
        </View>
      </TouchableWithoutFeedback>
    );
  }
}

export default CourseItem;